<template>
  <div class="app-container m-oss">
    <a-card class="m-oss-side">
      <a-tree class="draggable-tree" block-node :tree-data="state.cateList"
        v-if="state.cateList.length > 0 && state.cateloading === false" auto-expand-parent default-expand-all
        @select="handleCate" :fieldNames="{
          title: 'name', key: 'cate_id'
        }">
      </a-tree>
      <a-empty v-if="state.cateloading === false && state.cateList.length === 0" />
    </a-card>
    <div class="m-oss-table">
      <div class="footer">
        <div class="flex justify-end mb-3">
          <a-space>
            <a-button type="primary" @click="handleUpImg">上传图片</a-button>
          </a-space>
        </div>
        <a-row :gutter="[10, 2]" v-if="state.imgloading === false && state.imgList.length > 0">
          <a-col :span="3" v-for="(item, index) in state.imgList" :key="index" @click="handleImg(item)">
            <div class="img_box gutter_box img_selected" v-if="selectImgs.ids.indexOf(item.img_id) >= 0">
              <template v-if="item.file_type === 'video'">
                <video :src="item.img" width="104" height="104" controls />
              </template>
              <template v-else>
                <img :src="item.img" class="oss_img" />
              </template>
              <div class="oss_name">
                <a-tooltip placement="top" :title="item.name">
                  {{ item.name }}
                </a-tooltip>
              </div>
            </div>
            <div class="img_box gutter_box" v-else>
              <template v-if="item.file_type === 'video'">
                <video :src="item.img" width="104" height="104" controls />
              </template>
              <template v-else>
                <img :src="item.img" class="oss_img" />
              </template>
              <div class="oss_name">
                <a-tooltip placement="top" :title="item.name">
                  {{ item.name }}
                </a-tooltip>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-empty v-if="state.imgloading === false && state.imgList.length === 0" />
        <!--分页-->
        <div class="pagination">
          <a-pagination v-model:current="state.page" show-size-changer :show-total="(total) => `总共 ${total} 条数据`"
            v-model:page-size="state.pageSize" show-quick-jumper :total="state.all_count" @change="onChange"
            @showSizeChange="onChangePageSize" />
        </div>
      </div>
    </div>
    <!--  上传图片-->
    <UploadImg ref="uploadRef" @madal-success="refresh" />
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { getOssCate, getOssImg } from "@/api/home.js";
import { message } from "ant-design-vue";
import UploadImg from "./components/UploadImg.vue";

const uploadRef = ref();
const fileList = ref([]);

const parentProps = defineProps({
  is_select: {
    type: Boolean,
    default: false,
  }, //是否选择
  is_more: {
    type: Boolean,
    default: false,
  }, //是否多个
  imgLimit: {
    type: Number,
    default: 0, //多个的时候，限制xx个
  },
});

const state = reactive({
  cateList: [], //分类列表
  imgList: [], //图片列表
  cateloading: false,
  imgloading: false,
  all_count: 0,
  limit: 50,
  page: 1,
  pageSize: 30,
  cate_id: 0, //分类id
});
// 获取图片分类
const getCateList = () => {
  state.cateloading = true;
  getOssCate().then(function (res) {
    setTimeout(function () {
      state.cateloading = false;
    }, 500);
    if (res.code == 0) {
      state.cateList = res.data;
    }
  });
};
const getImgList = (cate_id = 0) => {
  state.imgloading = true;
  getOssImg({
    cate_id: cate_id,
    page: state.page,
    limit: state.pageSize,
  }).then(function (res) {
    setTimeout(function () {
      state.imgloading = false;
    }, 500);
    if (res.code == 0) {
      state.imgList = fileList.value = res.data.data;
      state.all_count = res.data.total;
    }
  });
};
getCateList();

getImgList();
// 上传图片
const handleUpImg = function () {
  uploadRef.value.show({
    cate_id: state.cate_id
  });
};

//点击
const handleCate = (e, e1) => {
  state.cate_id = e1.node.cate_id;
  getImgList(e1.node.cate_id);
};

const onChange = (page) => {
  state.page = page;
  getImgList(state.cate_id);
};

const onChangePageSize = (current, size) => {
  if (current == state.page && size != state.pageSize) {
    state.pageSize = size;
    getImgList(state.cate_id);
  }
};

//选中的图片
const selectImgs = reactive({
  imgs: [],
  ids: [],
});

const emits = defineEmits(["GetSelectImg"]);

//选择图片
const handleImg = (item) => {
  if (parentProps.is_select === true) {
    if (parentProps.is_more === true) {
      //选择多个
      var index = selectImgs.ids.indexOf(item.img_id);
      var index1 = selectImgs.imgs.indexOf(item.img);
      if (index >= 0 && index1 >= 0) {
        //删除
        selectImgs.imgs.splice(index1, 1);
        selectImgs.ids.splice(index, 1);
      } else {
        //是否最大限制
        if (
          parentProps.imgLimit > 0 &&
          selectImgs.ids.length >= parentProps.imgLimit
        ) {
          message.error("最多可选择" + parentProps.imgLimit + "张图");
          return;
        }
        //增加
        selectImgs.imgs.push(item.img);
        selectImgs.ids.push(item.img_id);
      }
    } else {
      selectImgs.imgs = [item.img];
      selectImgs.ids = [item.img_id];
    }
    emits("GetSelectImg", selectImgs.imgs);
  }
};

//清空选择的图片
const clearImg = () => {
  selectImgs.imgs = [];
  selectImgs.ids = [];
};
const refresh = () => {
  getImgList(state.cate_id);
};
//需要暴露出去
defineExpose({
  clearImg,
});
</script>
<style lang="scss" scoped>
@import "./index";
</style>
